<template>
    <div class="about">
        <a-button style="float:right" type="primary">返回</a-button>
        <h1>
            作用域闭包
        </h1>

        <a-card title="对象，[[Get]]，涉及原型链">
            <a slot="extra">示例代码node环境运行</a>
            <div class="left" style="float:left">
                <h3>程序</h3>
                <code-box>
                    var a=1; a.a=2;
                </code-box>
                <h3>结果</h3>

 
                <strong
                    >如果无论如何都没有找到名称相同的属性,那
                    <em>[[Get]]</em> 操作会返回值 <em>undefined</em></strong
                >
            </div>
            <div class="right" style="float:right">
                <h3>属性访问在实现时有一个微妙却非常重要的细节</h3>
                <code-box>
                    var myObject = { a: 2 }; myObject.a; // 2
                </code-box>
                <textarea cols="60" rows="10">
        在语言规范中, myObject.a 在 myObject 上实际上是实现了 [[Get]] 操作(有点像函数调用: [[Get]]() )。
            对象默认的内置 [[Get]] 操作首先在对象中查找是否有名称相同的属性,如果找到就会返回这个属性的值。
        然而,如果没有找到名称相同的属性,按照 [[Get]] 算法的定义会执行另外一种非常重要的行为。
        我们会在第 5 章中介绍这个行为(其实就是遍历可能存在的 [[Prototype]] 链,也就是原型链)。
                </textarea>
            </div>
        </a-card>
        <br />
        <a-card-meta
            title="总结"
            description=" 如果要访问对象中并不存在的一个属性, [[Get]] 操作(参见第 3
                章)就会查找对象内部 [[Prototype]]
                关联的对象。这个关联关系实际上定义了一条“原型链” (有点像嵌套的作用域链),在查找属性时会对它进行遍历。
                所有普通对象都有内置的 Object.prototype
                ,指向原型链的顶端(比如说全局作用域),如
                果在原型链中找不到指定的属性就会停止。 toString() 、 valueOf()
                和其他一些通用的功能 都存在于 Object.prototype
                对象上,因此语言中所有的对象都可以使用它们。"
        >
        </a-card-meta>
        <br />
        <hr />
        <a-card-meta
            title="参考:"
            description="你不知道的JavaScript（上卷）第三章 对象 ，3.3内容=>3.3.7[[Get]],原型链参照第五章"
        ></a-card-meta>
    </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import CodeBox from '@/components/CodeBox.vue';
@Component({
    components: {
        CodeBox,
    },
})
export default class BrushProblem extends Vue {
    private result: any;
}
</script>
<style lang="less" scoped>
.left {
    display: flex;
    flex-direction: column;
    strong {
        em {
            font-size: 1.2rem;
            color: goldenrod;
        }
    }
}
.right {
    position: relative;
    padding-left: 1rem;
    letter-spacing: 0.15rem;

    :before {
        content: '';
        display: inline-block;
        width: 5px;
        height: 100%;
        background: #54b689;
        position: absolute;
        left: 0;
        top: 0;
    }
    textarea {
        display: flex;
        flex-direction: column;
        font-size: 1.1rem;
        color: #54b689;
    }
}
</style>
